Unidad 4.3 - CSS III

En esta unidad se estudian propiedades avanzadas de CSS relacionadas con posicionamiento, visibilidad, transformaciones visuales, animaciones y diseño responsive. Son conceptos fundamentales para crear interfaces modernas, dinámicas y adaptables.

4.23 Posicionamientos: relativo, absoluto y fijo

position relative absolute

La propiedad position controla cómo se coloca un elemento dentro de la página.

Position relative

div{ position:relative; top:20px; left:30px; }

El elemento mantiene su espacio original pero se desplaza visualmente.

Position absolute

div{ position:absolute; top:0; right:0; }

El elemento sale del flujo normal y se posiciona respecto a su contenedor padre.

Position fixed

header{ position:fixed; top:0; width:100%; }

El elemento permanece fijo aunque el usuario haga scroll.

Position sticky

nav{ position:sticky; top:0; }
absolute busca el primer padre con position diferente de static.

Mini-test

1. ¿Qué valor mantiene un elemento fijo al hacer scroll?

4.24 La propiedad float

float

Float permite colocar elementos a izquierda o derecha.

img{ float:left; }

Valores

  • left
  • right
  • none

Ejemplo práctico

.card{ width:200px; float:left; margin:10px; }

Muy usado antiguamente para layouts antes de Flexbox y Grid.

Los elementos flotados salen parcialmente del flujo normal.

Mini-test

1. ¿Qué propiedad coloca elementos a la izquierda?

4.25 La propiedad clear

clear

Clear controla el comportamiento respecto a elementos flotantes.

footer{ clear:both; }

Valores

Valor Función
left Limpia flotantes izquierda
right Limpia flotantes derecha
both Limpia ambos lados
clear:both era muy usado en diseños clásicos con float.

Mini-test

1. ¿Qué valor limpia ambos lados?

4.26 La propiedad z-index

z-index

z-index controla qué elemento aparece por encima de otro.

.modal{ position:absolute; z-index:999; }

Funcionamiento

  • Mayor valor = más arriba.
  • Funciona con elementos posicionados.
  • Muy usado en menús y modales.

Ejemplo

.box1{ z-index:1; } .box2{ z-index:10; }
z-index no funciona correctamente sin position.

Mini-test

1. ¿Qué propiedad controla profundidad visual?

4.27 La propiedad display

display

Display controla cómo se comporta un elemento visualmente.

Valores comunes

Valor Función
block Ocupa toda la línea
inline No rompe línea
inline-block Mixto
none Oculta elemento
flex Contenedor flexible

Ejemplo

nav{ display:flex; }
display:none elimina completamente el elemento visualmente.

Mini-test

1. ¿Qué valor oculta completamente un elemento?

4.28 La propiedad visibility

visibility

Visibility controla si un elemento es visible manteniendo su espacio.

div{ visibility:hidden; }

Diferencia con display:none

  • visibility:hidden mantiene espacio.
  • display:none elimina espacio.

Valores

  • visible
  • hidden
  • collapse
visibility:hidden sigue ocupando espacio en el layout.

Mini-test

1. ¿Qué propiedad oculta pero mantiene espacio?

4.29 Transformaciones

transform

Transform modifica visualmente elementos HTML.

Rotación

transform:rotate(45deg);

Escala

transform:scale(1.5);

Traslación

transform:translateX(50px);

Múltiples transformaciones

transform: rotate(20deg) scale(1.2);
Transform funciona muy bien junto a transiciones.

Mini-test

1. ¿Qué función rota elementos?

4.30 Transiciones

transition

Las transiciones suavizan cambios entre estados.

button{ transition:all .3s; }

Hover animado

button:hover{ background:red; transform:scale(1.1); }

Propiedades importantes

  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function

Timing functions

  • ease
  • linear
  • ease-in
  • ease-out
Sin duración no existe transición visible.

Mini-test

1. ¿Qué propiedad controla duración?

4.31 Animaciones

animation @keyframes

Las animaciones permiten crear movimientos complejos en CSS.

Definir animación

@keyframes mover{ from{ left:0; } to{ left:300px; } }

Aplicar animación

div{ position:relative; animation:mover 2s infinite; }

Propiedades

  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count

Ejemplo rebote

@keyframes bounce{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-50px); } 100%{ transform:translateY(0); } }
Las animaciones CSS son más eficientes que muchas animaciones JS.

Mini-test

1. ¿Qué regla define animaciones?

4.32 Diseño adaptativo

Responsive @media

El diseño adaptativo permite que una web funcione correctamente en móviles, tablets y ordenadores.

Media queries

@media(max-width:768px){ body{ background:black; } }

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0" >

Buenas prácticas responsive

  • Usar Flexbox y Grid.
  • Evitar tamaños fijos.
  • Usar unidades relativas.
  • Optimizar imágenes.
  • Diseñar mobile-first.

Ejemplo responsive

.container{ display:flex; gap:20px; } @media(max-width:700px){ .container{ flex-direction:column; } }
Responsive design es obligatorio en desarrollo web moderno.

Mini-test

1. ¿Qué regla permite diseño responsive?

Unidad 4.3 completada 🚀